<!doctype html>
<html>
    <head>

        <title>jsPlumb - elements as source and targets</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="node_modules/@jsplumb/browser-ui/css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="../demo.css">
    </head>
    <body>
        <!-- content -->
        <div class="jtk-demo-main">
            <div class="jtk-demo-canvas canvas-wide source-target-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="window sourceWindow" id="sourceWindow1" data-jtk-not-draggable>
                    <strong>Window 1</strong>
                    <a href="#" class="enableDisable"></a>
                </div>
                <div class="window smallWindow targetWindow" id="targetWindow2"><strong>Window 2</strong><a href="#" class="enableDisable"></a><br/><br/></div>
                <div class="window smallWindow targetWindow" id="targetWindow3"><strong>Window 3</strong><a href="#" class="enableDisable"></a><br/><br/></div>
                <div class="window smallWindow targetWindow" id="targetWindow4"><strong>Window 4</strong><a href="#" class="enableDisable"></a><br/><br/></div>
                <div class="window smallWindow targetWindow" id="targetWindow5"><strong>Window 5</strong><a href="#" class="enableDisable"></a><br/><br/></div>
                <div class="window smallWindow targetWindow" id="targetWindow6"><strong>Window 6</strong><a href="#" class="enableDisable"></a><br/><br/></div>
            </div>
            <div class="description">
                <h4>SOURCES &amp; TARGETS</h4>
                <p>Drag Connections from the blue element to any of the green ones. You can also drag existing
                    Connections from one green element to another - Connections are, by default, detachable (this behaviour can be overridden).</p>
                <p>The <strong>makeSource</strong> and <strong>makeTarget</strong>functions provide an alternative means of setting up your UI to support draggable connections - here we treat entire
                    elements as sources and targets, and only when Connections are established do we assign Endpoints for them.</p>
                <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor locations.</p>
                <p>
                    The `disable` link is excluded from being a drag source through the use of the `filter` parameter on the makeSource call.
                </p>
                <p>The green elements are configured as Connection targets, with a `Top` anchor, and are draggable</p>
            </div>
        </div>

        <!-- /content -->
        <script src="_build/demo.umd.js"></script>

    </body>
</html>
